/*
 * FileName: 基本信息组件
 * Created Date: 2022-10-13 11:39:44
 * Author: 文初阳
 * -----
 * Last Modified: 2022-10-13 11:39:44
 * Modified By: 文初阳
 */
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space } from 'antd';
import React from 'react';
import styles from './BaseInfo.module.scss';

const { TextArea } = Input;

/**
 * 联系方式自定义校验规则：
 * 至少需要有一条数据，并且label和value至少填一个
 */
// const contactValidator = async (_: any, names: any) => {
//     if (!names || names.length < 1 || !(names?.filter((item: any) => item !== undefined).length > 0)) {
//         return Promise.reject(new Error('至少填写一条联系方式'));
//     }
// };

const BaseInfo: React.FC = () => {
    return (
        <div className={styles.wrapper}>
            <h1>基本信息</h1>
            <div className={styles.formWrapper}>
                <Form.Item label="姓名" name="name" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item label="求职岗位" name="job" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item label="一句话简介" name="summary">
                    <TextArea rows={2} />
                </Form.Item>
                <Form.List name="aboutMe">
                    {(fields, { add, remove }, { errors }) => (
                        <Form.Item label="关于我" required={false}>
                            {fields.map(({ key, name, ...restField }) => (
                                <div className={styles.itemWrapper} key={key}>
                                    <Form.Item {...restField} noStyle name={[name, 'value']}>
                                        <TextArea rows={2} placeholder="简短自我介绍，如：女，23岁，热爱工作" />
                                    </Form.Item>
                                    <MinusCircleOutlined
                                        className="dynamic-delete-button"
                                        onClick={() => remove(name)}
                                    />
                                </div>
                            ))}
                            <Form.Item noStyle>
                                <Button
                                    type="dashed"
                                    onClick={() => add()}
                                    style={{
                                        width: '60%',
                                    }}
                                    icon={<PlusOutlined />}
                                >
                                    新增一条
                                </Button>
                                <Form.ErrorList errors={errors} />
                            </Form.Item>
                        </Form.Item>
                    )}
                </Form.List>
                <Form.List name="knowMe">
                    {(fields, { add, remove }, { errors }) => (
                        <Form.Item label="了解我" required={false}>
                            {fields.map(({ key, name, ...restField }) => (
                                <div className={styles.itemWrapper} key={key}>
                                    <div className={styles.label}>
                                        <Form.Item {...restField} noStyle name={[name, 'label']}>
                                            <Input placeholder="社交平台，如：github" />
                                        </Form.Item>
                                    </div>
                                    <div className={styles.value}>
                                        <Form.Item {...restField} noStyle name={[name, 'value']}>
                                            <Input placeholder="如：https://github.com/wenchuyang" />
                                        </Form.Item>
                                    </div>
                                    <MinusCircleOutlined
                                        className="dynamic-delete-button"
                                        onClick={() => remove(name)}
                                    />
                                </div>
                            ))}
                            <Form.Item noStyle>
                                <Button
                                    type="dashed"
                                    onClick={() => add()}
                                    style={{
                                        width: '60%',
                                    }}
                                    icon={<PlusOutlined />}
                                >
                                    新增一条
                                </Button>
                                <Form.ErrorList errors={errors} />
                            </Form.Item>
                        </Form.Item>
                    )}
                </Form.List>
                <Form.List name="contactMe">
                    {(fields, { add, remove }, { errors }) => (
                        <Form.Item label="联系我" required={false}>
                            {fields.map(({ key, name, ...restField }) => (
                                <div className={styles.itemWrapper} key={key}>
                                    <div className={styles.label}>
                                        <Form.Item {...restField} noStyle name={[name, 'label']}>
                                            <Input placeholder="联系方式，如：手机号" />
                                        </Form.Item>
                                    </div>
                                    <div className={styles.value}>
                                        <Form.Item {...restField} noStyle name={[name, 'value']}>
                                            <Input placeholder="如：150XXXX6784" />
                                        </Form.Item>
                                    </div>
                                    <MinusCircleOutlined
                                        className="dynamic-delete-button"
                                        onClick={() => remove(name)}
                                    />
                                </div>
                            ))}
                            <Form.Item noStyle>
                                <Button
                                    type="dashed"
                                    onClick={() => add()}
                                    style={{
                                        width: '60%',
                                    }}
                                    icon={<PlusOutlined />}
                                >
                                    新增一条
                                </Button>
                                <Form.ErrorList errors={errors} />
                            </Form.Item>
                        </Form.Item>
                    )}
                </Form.List>
            </div>
        </div>
    );
};
export default BaseInfo;
